<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="metro-bootstrap.css" rel="stylesheet">
<link
	href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600'
	rel='stylesheet' type='text/css'>
<link
	href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css"
	rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"
	type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="metro.min.js"></script>
<script src="metro-treeview.js"></script>
<link rel="stylesheet" href="db.css" type="text/css">
<link rel="stylesheet" href="modal.css" type="text/css">
<link rel="stylesheet" href="table.css" type="text/css">
<title>DB</title>
</head>
<body>
	<div class="commands">
		</br> <a class="button" style="margin-left: 10px;" href="#openModal">Create</a>
		<a class="button" style="margin-left: 10px;" href="#openModal">Drop</a>
	</div>
	<div class="m">
		<div class="wrapper">
			<div class="metro">
				<div class="tree">
					<ul class="treeview" data-role="treeview">
						<li class="node" id="node"><a href="#"><span
								class="node-toggle"></span>root</a>
							<ul>
								<li><a class="testButton" href="#">database1</a></li>
								<li><a href="#">database2</a></li>
								<li><a href="#">database3</a></li>
								<li><a href="#">database4</a></li>
								<li><a href="#">database5</a></li>
								<li class="node"><a href="#"><span class="node-toggle"></span>database6</a>
									<ul>
										<li><a href="#">tabla1</a></li>
										<li><a href="#">tabla2</a></li>
										<li><a href="#">tabla3</a></li>
										<li><a href="#">tabla4</a></li>
										<li><a href="#">tabla5</a></li>
									</ul></li>
							</ul></li>
						<li class="node collapsed"><a href="#"><span
								class="node-toggle"></span>info@metroui.net</a>
							<ul>
								<li><a href="#">Inbox</a></li>
								<li><a href="#">Outbox</a></li>
								<li><a href="#">Drafts</a></li>
								<li><a href="#">Rss-channels</a></li>
								<li><a href="#">Trash</a></li>
							</ul></li>
					</ul>
				</div>
			</div>
			<div class="testbox">
				<form id="my_form" action="ExecuteServlet">
					<center>
						<div class="divtext">
							<label id="icon" for="name"><i class="icon-pencil"></i></label>
							<textarea name="text" type="textarea" id="name" rows="5"
								placeholder="Insert sql here" required></textarea>
							<br />
						</div>
						<br /> <a href="javascript:{}"
							onclick="document.getElementById('my_form').submit();"
							class="button">Execute</a>
					</center>
				</form>
			</div>
		</div>
		<div class="right">
			<table id="results">
				<tr>
					<th class="firstrowfirst">Primary Key</th>
					<th>Attribute1</th>
					<th>Attribute2</th>
					<th class="firstrowlast">Attribute3</th>
				</tr>
				<tr>
					<td>1</td>
					<td>Alfreds Futterkiste</td>
					<td>Maria Anders</td>
					<td>Germany</td>
				</tr>
				<tr class="alt">
					<td>2</td>
					<td>Berglunds snabbköp</td>
					<td>Christina Berglund</td>
					<td>Sweden</td>
				</tr>
				<tr>
					<td>3</td>
					<td>Centro comercial Moctezuma</td>
					<td>Francisco Chang</td>
					<td>Mexico</td>
				</tr>
				<tr class="alt">
					<td>4</td>
					<td>Ernst Handel</td>
					<td>Roland Mendel</td>
					<td>Austria</td>
				</tr>
				<tr>
					<td>5</td>
					<td>Island Trading</td>
					<td>Helen Bennett</td>
					<td>UK</td>
				</tr>
				<tr class="alt">
					<td>6</td>
					<td>Königlich Essen</td>
					<td>Philip Cramer</td>
					<td>Germany</td>
				</tr>
				<tr>
					<td>7</td>
					<td>Laughing Bacchus Winecellars</td>
					<td>Yoshi Tannamuri</td>
					<td>Canada</td>
				</tr>
				<tr class="alt">
					<td>8</td>
					<td>Magazzini Alimentari Riuniti</td>
					<td>Giovanni Rovelli</td>
					<td>Italy</td>
				</tr>
				<tr>
					<td>9</td>
					<td>North/South</td>
					<td>Simon Crowther</td>
					<td>UK</td>
				</tr>
				<tr class="alt">
					<td>10</td>
					<td>Paris spécialités</td>
					<td>Marie Bertrand</td>
					<td>France</td>
				</tr>
			</table>
		</div>
	</div>
	<div id="openModal" class="modalDialog">
		<div>
			<a href="#close" title="Close" class="close">X</a>
			<h2>Modal Box</h2>
			<p>This is a sample modal box that can be created using the
				powers of CSS3.</p>
			<p>You could do a lot of things here like have a pop-up ad that
				shows when your website loads, or create a login/register form for
				users.</p>
		</div>
	</div>
	<script>
		$("body").css("overflow", "hidden");
		$("body").css("scrolling", "no");
		$('#inline-popups').magnificPopup({
			delegate : 'a',
			removalDelay : 500, //delay removal by X to allow out-animation
			callbacks : {
				beforeOpen : function() {
					this.st.mainClass = this.st.el.attr('data-effect');
				}
			},
			midClick : true
		// allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
		});
	</script>
</body>
</html>
